<template>
	<view class="container">
		<view class="flex diygw-col-24 justify-between flex-nowrap flex16-clz">
			<view class="diygw-col-0 search2-clz">
				<view class="diygw-search">
					<view class="flex1 flex padding-xs solid radius">
						<text style="color: #555 !important" class="diy-icon-search"></text>
						<input class="flex1" name="search2" type="" v-model="search2" placeholder="请输入关键字" />
					</view>
					<view @tap="navigateTo" data-type="page" data-url="/pages/sousuolishi" style="color: #333 !important" class="diygw-tag margin-left-xs radius-xs"> 搜索 </view>
				</view>
			</view>
			<view class="flex diygw-col-0 justify-end avatar5-clz">
				<view @tap="navigateTo" data-type="tip" data-tip="联系客服：0376-8989898" class="diygw-avatar sm orange radius">
					<text class="diy-icon-servicefill"></text>
				</view>
			</view>
		</view>
		<view class="flex diygw-col-24">
			<swiper class="swiper" indicator-color="rgba(51, 51, 51, 0.39)" indicator-active-color="#fff" indicator-dots="true" autoplay interval="3000" circular="true" style="height: 150px">
				<swiper-item v-for="(item, index) in firstImage.data.list" :key="index" class="diygw-swiper-item">
					<view class="diygw-swiper-item-wrap">
						<image :src="item.url_" class="diygw-swiper-image"></image>
						<view class="diygw-swiper-item-title">
							{{ item.name_ }}
						</view>
					</view>
				</swiper-item>
			</swiper>
		</view>
		<view class="flex diygw-col-24 justify-between flex-nowrap flex1-clz">
			<view class="flex flex-wrap diygw-col-0 justify-end flex-clz">
				<view class="diygw-col-0 text-clz"> 在线企业家导师 </view>
			</view>
			<view class="flex flex-wrap diygw-col-0 justify-end flex2-clz" @tap="navigateTo" data-type="page" data-url="/pages/daoshiliebiao">
				<view class="diygw-col-0 text4-clz"> 更多导师 </view>
				<view class="flex diygw-col-0 avatar3-clz">
					<view class="diygw-avatar xs white radius">
						<text class="diy-icon-roundright"></text>
					</view>
				</view>
			</view>
		</view>
		<view class="flex diygw-col-24 flex-direction-column">
			<view class="diygw-tabs text-center solid-bottom justify-center scale-title small-border">
				<view class="diygw-tab-item" :class="index == tabsIndex ? ' cur text-green ' : ''" v-for="(item, index) in tabsDatas" :key="index" @click="changeTabs" :data-index="index"> <text v-if="item.icon" :class="item.icon"></text> {{ item.text }} </view>
			</view>
			<view class="">
				<view v-if="tabsIndex == 0" class="flex-sub"> </view>
				<view v-if="tabsIndex == 1" class="flex-sub"> </view>
				<view v-if="tabsIndex == 2" class="flex-sub"> </view>
				<view v-if="tabsIndex == 3" class="flex-sub"> </view>
			</view>
		</view>
		<view class="flex diygw-col-24 diygw-bottom">
			<view class="diygw-grid diygw-actions">
				<button @tap="navigateTo" data-type="page" data-url="/pages/index/shouye" class="diygw-action addon">
					<view class="diygw-grid-inner">
						<view class="diygw-grid-icon diygw-avatar diy-icon-homefill" style="color: rgba(244, 91, 36, 0.97)"> </view>
						<view class="diygw-grid-title"> 首页 </view>
					</view>
				</button>
				<button @tap="navigateTo" data-type="page" data-url="/pages/message/messageList" class="diygw-action addon">
					<view class="diygw-grid-inner">
						<view class="diygw-grid-icon diygw-avatar diy-icon-message"> </view>
						<view class="diygw-grid-title"> 消息中心 </view>
					</view>
				</button>
				<button @tap="navigateTo" data-type="page" data-url="/pages/youxuanxiangmu/youxuanxiangmu" class="diygw-action addon">
					<view class="diygw-grid-inner">
						<view class="diygw-grid-icon diygw-avatar diy-icon-crown"> </view>
						<view class="diygw-grid-title"> 优选项目 </view>
					</view>
				</button>
				<button @tap="navigateTo" data-type="page" data-url="/pages/my/qiyejiagerenzhongxin" class="diygw-action addon">
					<view class="diygw-grid-inner">
						<view class="diygw-grid-icon diygw-avatar diy-icon-my"> </view>
						<view class="diygw-grid-title"> 我的 </view>
					</view>
				</button>
			</view>
		</view>
		<view v-for="(item, index) in business.data.list" :key="index" class="flex diygw-col-24 justify-around flex-nowrap flex7-clz" @tap="navigateTo" data-type="page" data-url="/pages/index/qiyejiaxiangqing" :data-id="item.id_">
			<view class="flex diygw-col-0 justify-center">
				<view v-for="(item, index) in business.data.list" :key="index" class="diygw-avatar xs radius bg-none">
					<image mode="aspectFit" class="diygw-avatar-img radius" :src="item.pic_"></image>
				</view>
			</view>
			<view class="flex diygw-col-24 flex-direction-column justify-start flex-wrap flex4-clz">
				<view class="flex flex-wrap diygw-col-0 flex6-clz">
					<view class="diygw-col-0 text2-clz">
						{{ item.user_name_ }}
					</view>
					<view class="diygw-col-0"> 已帮扶5家企业 </view>
				</view>
				<view class="flex flex-wrap diygw-col-0 flex9-clz">
					<view class="diygw-col-0 text7-clz">
						{{ item.need_type_ }}
					</view>
					<view class="diygw-col-0">
						{{ item.bus_name_ }}
					</view>
				</view>
				<view class="flex flex-wrap diygw-col-0 flex11-clz">
					<view class="diygw-col-0 text11-clz"> 管理时长： </view>
					<view class="diygw-col-0">
						{{ item.manage_time_ }}
					</view>
				</view>
				<view class="flex flex-wrap diygw-col-0 flex13-clz">
					<view class="diygw-col-0 text15-clz"> 资金评分： </view>
					<view class="diygw-col-0">
						{{ item.cash_ }}
					</view>
				</view>
			</view>
			<view class="flex diygw-col-0 justify-end items-end flex-nowrap flex15-clz">
				<view class="flex diygw-col-0 justify-end avatar4-clz">
					<view class="diygw-avatar xs radius">
						<text class="diy-icon-commentfill"></text>
					</view>
				</view>
				<view class="diygw-col-0 text19-clz"> 256 </view>
			</view>
		</view>
		<view class="clearfix"></view>
	</view>
</template>

<script>
	//create by: 邓志锋 <280160522@qq.com> <https://www.diygw.com> DIYGW可视化设计一键生成源码
	export default {
		data() {
			return {
				//用户全局信息
				userInfo: {},
				business: {
					code: '200',
					data: {
						count: 3,
						list: [
							{
								user_phone_: '123',
								pic_: './image',
								status_: '审核不通过',
								user_name_: '企业家1',
								id_: '434437408591446017',
								bus_type_: '制造业',
								cash_: '9',
								bus_id_: '434437408591446017',
								bus_resource_: '一家公司',
								experience_: '9',
								bus_name_: '测试企业',
								bus_desc_: '我是一个企业家',
								resource_: '9',
								manage_time_: '7'
							},
							{
								user_phone_: '123',
								pic_: './image',
								status_: '审核通过',
								user_name_: '企业家2',
								id_: '434437408591446018',
								bus_type_: '制造业',
								cash_: '8',
								bus_id_: '434437408591446018',
								bus_resource_: '一家公司',
								experience_: '8',
								bus_name_: '测试2',
								bus_desc_: '我是企业家2',
								resource_: '8',
								manage_time_: '8'
							},
							{
								id_: '435302975212093441'
							}
						]
					},
					isOk: true
				},
				firstImage: {
					code: '200',
					data: {
						count: 3,
						list: [
							{
								pic_: '[{"id":"434549814405103617","name":"WechatIMG124.jpeg"}]',
								status_: '启用',
								id_: '434549818926039041',
								url_: 'http://www.baidu.com',
								name_: '第一张图'
							},
							{
								status_: '2',
								id_: '435028127613452289',
								url_: 'http://www.baidu.com',
								name_: '叶阳茂'
							},
							{
								status_: '1',
								id_: '435028132000956417',
								url_: 'http://www.baidu.com22',
								name_: '第三张图'
							}
						]
					},
					isOk: true
				},
				search2: '',
				tabsDatas: [
					{ text: `同行业`, icon: `` },
					{ text: `找资金`, icon: `` },
					{ text: `找资源`, icon: `` },
					{ text: `找经验`, icon: `` }
				],
				tabsIndex: 0
			};
		},
		onShow() {
			this.setCurrentPage(this);
		},
		onLoad(option) {
			this.setCurrentPage(this);
			if (option) {
				this.setData({
					globalOption: this.getOption(option)
				});
			}

			this.init();
		},
		methods: {
			async init() {
				await this.businessApi();
				await this.firstImageApi();
			},
			// 企业家接口 API请求方法
			async businessApi() {
				let business = await this.$http.post(
					'https://agent.diygw.com/',
					{
						url: '/form/formCustSql/view/liststr_businessList',
						method: 'post',
						headers: {
							'Content-Type': 'application/x-www-form-urlencoded'
						},
						param: '{"curPage":1,"pageSize":"10","params":{}}'
					},
					{
						'Content-type': 'application/json'
					},
					'json'
				);
				this.business = business;
			},
			// 首页轮播图 API请求方法
			async firstImageApi() {
				let firstImage = await this.$http.post(
					'https://agent.diygw.com/',
					{
						url: '/form/formCustSql/view/liststr_imageList',
						method: 'post',
						headers: {
							'Content-Type': 'application/x-www-form-urlencoded'
						},
						param: '{"curPage":1,"pageSize":"10","params":{}}'
					},
					{
						'Content-type': 'application/json'
					},
					'json'
				);
				this.firstImage = firstImage;
			},
			changeTabs(evt) {
				let { index } = evt.currentTarget.dataset;
				if (index == this.tabsIndex) return;
				this.setData({
					tabsIndex: index
				});
			}
		}
	};
</script>

<style lang="scss" scoped>
	.flex16-clz {
		flex: 1;
	}
	.search2-clz {
		flex: 1;
	}
	.avatar5-clz {
		margin-left: 5px;
		margin-top: 5px;
		margin-bottom: 5px;
		margin-right: 5px;
	}
	.text-clz {
		margin-left: 0px;
		margin-top: 15px;
		margin-bottom: 5px;
		margin-right: 0px;
	}
	.text4-clz {
		margin-left: 0px;
		margin-top: 15px;
		margin-bottom: 5px;
		margin-right: 0px;
	}
	.avatar3-clz {
		margin-top: 10px;
		margin-bottom: 5px;
		margin-right: 5px;
	}
	.flex4-clz {
		margin-left: 15px;
		width: calc(100% - 15px - 5px) !important;
		margin-top: 5px;
		margin-bottom: 5px;
		margin-right: 5px;
	}
	.text2-clz {
		font-weight: bold;
	}
	.text7-clz {
		font-weight: bold;
	}
	.text11-clz {
		font-weight: bold;
	}
	.text15-clz {
		font-weight: bold;
	}
	.avatar4-clz {
		margin-left: 5px;
		background-size: 100% 100%;
		margin-top: 15px;
		margin-bottom: 5px;
		margin-right: 0px;
	}
	.text19-clz {
		margin-left: 5px;
		margin-top: 5px;
		margin-bottom: 10px;
		margin-right: 5px;
	}
	.container {
		padding-left: 0px;
		padding-right: 0px;

		font-size: 12px;
	}
	.container {
		padding-bottom: 80px;
	}
</style>
